<template>
  <div
    :class="{ 'scroll-mask': isScroll }"
    class="scroll"
    @scroll="onScroll"
  >
    <div class="relative">
      <slot />
    </div>
  </div>
</template>
<script lang="ts" setup name="ScrollMask">
const isScroll = ref(false);
const onScroll = (e: any) => {
  const scrollLen = e?.target?.scrollTop;
  if (scrollLen === 0) {
    isScroll.value = false;
  } else {
    isScroll.value = true;
  };
};

</script>

<style scoped lang="scss">
.scroll-mask {
  padding-bottom: 10px;
  mask: linear-gradient(transparent 0, black 20px, black 90%, transparent 100%);
  -webkit-mask: linear-gradient(transparent 0, black 20px, black 90%, transparent 100%);
  // mask: linear-gradient(180deg, transparent 0, black 20px, black 95%, transparent 100%);
  // -webkit-mask: linear-gradient(180deg, transparent 0, black 20px, black 95%, transparent 100%);
  // z-index: 0;
}
</style>